<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>OrangePi 系统信息</title>
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<jsp:include page="/comm/link.jsp" />
	
  </head>
  <body>
	<jsp:include page="/comm/header.jsp" />

	<div class="container" id="main" >
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-info">
			 		<div class="panel-heading">
			 			<h3 class="panel-title">网络监控
			 			<span class="pull-right">
			 				入网:<span class="net_in">0kb/s</span>
			 				出网:<span class="net_out">0kb/s</span>
			 			</span>
			 			</h3>
			 		</div>
			 		<div id="container" style="height:420px;"></div>
			 		<p class="text">
			 			<span class="n_point1"></span>入网mbps
			 			<span class="n_point2"></span>出网mbps
			 		</p>
			 </div>
			 </div>
			</div>
		</div>
	<jsp:include page="/comm/footer.jsp" />
		
  <script>
  		$(function(){
  			addActiveNav('网络监控');
  			
  			var chart = $('#container').highcharts({                                                
  				chart: {                                                                
  					type: 'spline',                                                     
  					animation: Highcharts.svg, // don't animate in old IE               
  					marginRight: 10,                                                    
  					events: {                                                           
  						load: function() {         
  							// set up the updating of the chart each second             
  							var series0 = this.series[0];  
  							var series1 = this.series[1];
  							setInterval(function() {                                    
  								var x = (new Date()).getTime() ;// current time         
  								$.get("<%=path%>/comm/commAction?m=net",function(resp){
  										//异步获网络
  										var obj =  jQuery.parseJSON(resp);
  										if(obj.in_net != 'error'){
  											
  											if(obj.in_net>1000){
  												$(".net_in").html(parseFloat(obj.in_net/1024).toFixed(2)+"MB/s");
  											}else{
  												$(".net_in").html(parseFloat(obj.in_net).toFixed(2)+"KB/s");
  											}
  											if(obj.in_out>1000){
  												$(".net_out").html(parseFloat(obj.out_net/1024).toFixed(2)+"MB/s");
  											}else{
  												$(".net_out").html(parseFloat(obj.out_net).toFixed(2)+"KB/s");
  											}
  											
  											var s1 =  parseFloat(obj.in_net/1024);
  											var s2 =  parseFloat(obj.out_net/1024);
  											if(s1>5) s1=4.99;
  											if(s2>5) s2=4.99;
  											series0.addPoint([x, s1], true, true);      
  	  										series1.addPoint([x, s2], true, true);  
  										}else{
  											series0.addPoint([x, 0.00], true, true);      
  	  										series1.addPoint([x, 0.00], true, true);  
  										}
  										
  									});
  								                
  							}, 2000);                                                   
  						}                                                               
  					}                                                                   
  				},                                                                      
  				title: {                                                                
  					text: null,                                            
  				},                                                                      
  				xAxis: {                                                                
  					type: 'datetime',                                                   
  					tickPixelInterval: 100                                              
  				},                                                                      
  				yAxis: {                                                                
  					title: {                                                            
  						text: "出入网(MB/s)",                                                   
  					},       
  					tickPositions: [0,  1,  2 , 3 , 4 , 5],
  					plotLines: [{                                                       
  						value: 0,                                                       
  						width: 1,                                                       
  						color: '#808080'
  					}]   
  					
  				},                                                                      
  				tooltip: {                                                              
  					formatter: function() {                                             
  							return '<b>'+ this.series.name +'</b><br/>'+                
  							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
  							Highcharts.numberFormat(this.y, 2);                         
  					}                                                                   
  				},                                                                      
  				legend: {                                                               
  					enabled: false                                                      
  				},                                                                      
  				exporting: {                                                            
  					enabled: false                                                      
  				},                                                                      
  				series: [{                                                              
  					name: '入网(MB/s)',
  					data: (function() {                                                 
  						// generate an array of random data                             
  						var data = [],                                                  
  							time = (new Date()).getTime(),                              
  							i;                                                          
	  						for (i = -10; i <= 0; i++) {                                    
	  							data.push({                                                 
	  								x: time + i * 2000,                                     
	  								y:0                            
	  							});        
	  						}                                                               
  						return data;                                                    
  					})()                                                                
  				},
  				{                                                              
  					name: '出网(MB/s)',                                                
  					data: (function() {                                                 
  						// generate an array of random data                             
  						var data = [],                                                  
  							time = (new Date()).getTime(),                              
  							i;                                                          
	  						for (i = -10; i <= 0; i++) {                                    
	  							data.push({                                                 
	  								x: time + i * 2000,                                     
	  								y:0                            
	  							});        
	  						}                                                               
  						return data;                                                    
  					})()                                                                
  				}
  				]                                                                      
  			});            
  		});
  		
  	</script>
	  
  </body>
</html>
